<template>
  <div class="about">
    <h1>This is an about page</h1>
    <el-button type="primary">Primary</el-button>
    <el-button type="success">{{ icpVisible }}</el-button>
    <el-input v-model="input" style="width: 240px" placeholder="Please input" />
    <el-button><svg-icon icon-class="xing" />SVG</el-button>
    <el-button class="box">测试文字颜色Scss</el-button>
    <br>
    <div style="width:100px;height:100px" :style="{ 'background-color': variables.fontColor }" />
  </div>
</template>
<script setup lang="ts">
import variables from "@/style/variables.module.scss";
const icpVisible = ref('ssss');
const input = ref('')
</script>

<style lang="scss" scoped>
@media (min-width: 1024px) {
  .about {
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
}

.box {
  color: $font-color;
}
</style>